import { Form, Input, Button, Toast } from 'antd-mobile'
import { getCodeApi, codeLoginApi } from '../../../api/user'
import { useCountDown, useFd } from '../../../hooks'
import { setInfo } from '../../../store/slice/userSlice'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'

function CodeLogin() {
  const [form] = Form.useForm()
  const { count, isDown, start } = useCountDown()
  const dispatch = useDispatch()
  const nav = useNavigate()

  // 伪代码：调用自己封装的防抖函数，对函数进行防抖
  // 调用 useFd() 这个 Hook 之后，得到的 fd 就是一个用于对函数进行防抖的函数
  // const fd = useFd()
  const fd = useFd()

  // 点击按钮，发送验证码
  const sendCode = async () => {
    try {
      // 1. 校验手机号是否合法
      const result = await form.validateFields(['tel'])
      // 2. 校验通过后，封装并调用发送验证码的接口
      const { data: res } = await getCodeApi(result.tel)
      // 3. 把请求到的验证码，自动回填到表单中
      form.setFieldValue('telCode', res.telCode)
      // 4. 开启按钮的倒计时功能
      start()
    } catch {
      Toast.show('手机号格式不正确！')
    }
  }

  // 点击登录按钮，当表单校验通过后，会执行 onFinish 函数
  const onFinish = async (values) => {
    const { data: res } = await codeLoginApi(values)
    // TODO: 把请求回来的 token 和用户的信息，存储到仓库中
    dispatch(setInfo(res))
    nav('/')
  }

  return (
    <div>
      <Form
        form={form}
        style={{ '--prefix-width': '80px' }}
        layout="horizontal"
        mode="card"
        // onFinish={防抖好的函数}
        // onFinish={fd(需要被防抖的函数)}
        // onFinish={fd(onFinish)}
        onFinish={fd(onFinish)}
        footer={
          <Button
            block
            type="submit"
            color="primary"
            shape="rounded"
          >
            登录
          </Button>
        }
      >
        <Form.Item
          label="手机号"
          name="tel"
          rules={[
            { required: true, message: '请输入手机号！' },
            { pattern: /^1[3-9]\d{9}$/, message: '请输入11位的手机号！' }
          ]}
        >
          <Input placeholder="请输入手机号" />
        </Form.Item>
        <Form.Item
          label="验证码"
          name="telCode"
          extra={
            <Button
              fill="none"
              onClick={sendCode}
              disabled={isDown}
            >
              {isDown ? `${count}s后可重发` : '发送验证码'}
            </Button>
          }
          rules={[{ required: true, message: '请输入验证码！' }]}
        >
          <Input placeholder="请输入验证码" />
        </Form.Item>
      </Form>
    </div>
  )
}

export default CodeLogin
